<template>
    <div>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="item in imgList" :key="item.id">
                <img v-lazy="item.img" />
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :border="false" :column-num="3">
       <van-grid-item to='/news'>
           <img src="../../../public/img/menu1.png" alt="">
           <p>新闻资讯</p>
       </van-grid-item>
       <van-grid-item to='/poto/list'>
           <img src="../../../public/img/menu2.png" alt="">
           <p>图片分享</p>
       </van-grid-item>
       <van-grid-item to="/goods">
           <img src="../../../public/img/menu3.png" alt="">
           <p>商品购买</p>
       </van-grid-item>
       <van-grid-item>
           <img src="../../../public/img/menu4.png" alt="">
           <p>留言反馈</p>
       </van-grid-item>
       <van-grid-item>
           <img src="../../../public/img/menu5.png" alt="">
           <p>视频专区</p>
       </van-grid-item>
       <van-grid-item>
           <img src="../../../public/img/menu6.png" alt="">
           <p>联系我们</p>
       </van-grid-item>
        </van-grid>
    </div>
</template>
<script>
export default {
    data() {
        return {
            imgList:{}
        }
    },
    created() {
        this.getlist()
    },
    methods: {
       async getlist(){
            const {data:res}=await this.$http.get('/api/getlunbo')
            // console.log(res)
            this.imgList=res.message
            
        }
    },
}
</script>

<style lang="less" scoped>
.van-swipe img{
    width: 100%;
    height: 200px;
}
.van-grid-item img{
    width: 60px;
}
</style>